<template>
	<view class="container">
		<Navigator2 :title="$t('device.networkSetting')"></Navigator2>

		<!-- 无线局域网 -->
		<view class="wireless-section" v-if="deviceType === '3'">
			<view class="wireless-header">
				<view class="wireless-info">
					<text class="wireless-title">{{ $t('device.wirelessLocalAreaNetwork') }}</text>
					<text class="wireless-subtitle">{{ $t('device.afterOpeningTheLocalAreaNetworkWillBeUsedFirst') }}</text>
				</view>
				<view class="wireless-switch">
					<switch :checked="networkPriority" color="#3478F7" style="transform:scale(0.8)" @change="networkPriorityChange" />
				</view>
			</view>

			<view class="wifi-options">
				<view class="wifi-option-row">
					<view class="wifi-option">
						<view class="wifi-option-image">
							<image class="wifi-option-icon" src="/static/wifi_2.4g.png" mode="aspectFit"></image>
							<image class="wifi-option-status" src="/static/check.png" mode="aspectFit"></image>
						</view>
						<view class="wifi-option-content">
							<text class="wifi-option-desc">{{ $t('device.supportConnecting24GWiFi') }}</text>
						</view>
					</view>
					<view class="wifi-option">
						<view class="wifi-option-image">
							<image class="wifi-option-icon" src="/static/wifi_5g.png" mode="aspectFit"></image>
							<image class="wifi-option-status" src="/static/error.png" mode="aspectFit"></image>
						</view>
						<view class="wifi-option-content">
							<text class="wifi-option-desc">{{ $t('device.doNotSupportConnecting5GWiFi') }}</text>
						</view>
					</view>
				</view>
				<view class="wifi-option-row">
					<view class="wifi-option">
						<view class="wifi-option-image">
							<image class="wifi-option-icon" src="/static/bgwl.png" mode="aspectFit"></image>
							<image class="wifi-option-status" src="/static/error.png" mode="aspectFit"></image>
						</view>
						<view class="wifi-option-content">
							<text class="wifi-option-desc">{{ $t('device.officeNetworkThatRequiresAuthentication') }}</text>
						</view>
					</view>
					<view class="wifi-option">
						<view class="wifi-option-image">
							<image class="wifi-option-icon" src="/static/ggwl.png" mode="aspectFit"></image>
							<image class="wifi-option-status" src="/static/error.png" mode="aspectFit"></image>
						</view>
						<view class="wifi-option-content">
							<text class="wifi-option-desc">{{ $t('device.publicNetworkThatRequiresAuthorization') }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 当前连接 -->
		<view class="section">
			<view class="section-title">{{ $t('device.currentConnection') }}</view>
			<view class="wifi-item" @click="handleCurrentWifi">
				<template v-if="networkType === '4G'">
					<image class="wifi-icon" src="/static/network4g.png" mode="aspectFit"></image>
					<text class="wifi-name">{{ $t('device.trafficCard4G') }}</text>
					<image class="arrow-icon" src="/static/network-right.png" mode="aspectFit"></image>
				</template>
				<template v-if="networkType === 'WIFI' && currentWifi">
					<image class="wifi-icon" src="/static/networkwifi-3.png" mode="aspectFit"></image>
					<text class="wifi-name">{{ currentWifi }}</text>
					<image class="arrow-icon" src="/static/network-right.png" mode="aspectFit"></image>
				</template>
			</view>
		</view>

		<!-- 我的网络 -->
		<template v-if="deviceType != '2'">
			<view class="section">
				<view class="section-title">{{ $t('device.myNetwork') }}</view>
				<view class="wifi-list">
					<view v-if="deviceType === '3' && networkType !== '4G'" class="wifi-item" @click="handle4GSelect">
						<image class="wifi-icon" src="/static/network4g.png" mode="aspectFit"></image>
						<text class="wifi-name">{{ $t('device.trafficCard4G') }}</text>
					</view>
					<template v-if="myWifiList.length > 0">
						<view class="wifi-item" v-for="item in myWifiList" :key="item.wifiName" v-if="item.wifiName !== currentWifi" @click="handleWifiSelect(item.wifiName, item.wifiPwd)">
							<image class="wifi-icon" src="/static/networkwifi-2.png" mode="aspectFit"></image>
							<text class="wifi-name">{{ item.wifiName }}</text>
						</view>
					</template>
				</view>
			</view>
		</template>
		

		<!-- 其他网络 -->
		<view class="section">
			<view class="section-title">{{ $t('device.otherNetwork') }}</view>
			<view class="wifi-item" @click="connectOtherNetwork">
				<image class="wifi-icon" src="/static/networkwifi-3.png" mode="aspectFit"></image>
				<text class="wifi-name">{{ $t('device.connectOtherNetwork') }}</text>
			</view>
		</view>

		<!-- 连接确认弹框 -->
		<neil-modal
			:show="showConnectModal"
			:showCancel="true"
			@close="handleModalClose"
			@confirm="confirmConnect">
			<view class="custom-modal-content">
				<view class="custom-modal-title">{{ $t('device.whetherToConnectThisNetwork') }}</view>
			</view>
		</neil-modal>

		<!-- 4G网络确认弹框 -->
		<neil-modal
			:show="show4GModal"
			:showCancel="true"
			@close="handle4GModalClose"
			@confirm="confirm4GConnect">
			<view class="custom-modal-content">
				<view class="custom-modal-title">{{ $t('device.confirmSwitchingTo4GNetwork') }}</view>
			</view>
		</neil-modal>

		<!-- 连接其他网络弹框 -->
		<neil-modal
			:show="showOtherNetworkModal"
			:showCancel="true"
			@close="handleOtherNetworkModalClose"
			@confirm="confirmOtherNetworkConnect">
			<view class="custom-modal-content">
				<view class="custom-modal-title">{{ $t('device.pleaseEnterWifiPassword') }}</view>
				<view class="wifi-input-container">
					<input
						class="wifi-input"
						v-model="otherWifiName"
						:placeholder="$t('device.pleaseEnterWifiName')"
						placeholder-style="color: #B4B4B4;"
					/>
					<input
						class="wifi-input password-input"
						v-model="otherWifiPwd"
						:placeholder="$t('device.pleaseEnterPassword')"
						placeholder-style="color: #B4B4B4;"
						password
					/>
				</view>
			</view>
		</neil-modal>
	</view>
</template>

<script>
	import Navigator2 from '@/components/Navigator2.vue'
	import neilModal from '@/components/neil-modal/neil-modal.vue'
	import api from '../../js/api'
	export default {
		data() {
			return {
				currentWifi: '',
				myWifiList: [],
				showConnectModal: false,
				selectedWifi: '',
				selectedWifiPwd: '',
				id: 0,
				deviceId: '',
				deviceType: '',
				networkType: '',
				networkPriority: true,
				showOtherNetworkModal: false,
				otherWifiName: '',
				otherWifiPwd: '',
				show4GModal: false
			}
		},
		onLoad(param) {
			console.log('onLoad param: ', param)
			this.id = param.id
			this.deviceId = param.deviceId
			this.deviceType = param.deviceType
			this.networkType = param.networkType
			this.networkPriority = param.networkPriority === 'true'

			if (param.currentWifi && param.currentWifi != 'undefined') {
				this.currentWifi = param.currentWifi
			}

			this.getMyWifiList()
		},
		methods: {
			networkPriorityChange(e) {
				console.log('networkPriorityChange', e.detail.value)
				this.networkPriority = e.detail.value
				
				api.saveDeviceRole({
					deviceId: this.id,
					wifiPriority: this.networkPriority
				}).then(res => {
					console.log('saveDeviceRole res: ', res)
					uni.showToast({
						title: this.$t('device.saveSuccess'),
						icon: 'success'
					})
				})
			},
			getMyWifiList() {
				const userInfo = uni.getStorageSync('userInfo')
				api.getMyWifiList(userInfo.phone).then(res => {
					console.log('getMyWifiList res: ', res)
					this.myWifiList = res.content
				})
			},
			handleCurrentWifi() {
				uni.showToast({
					title: this.$t('device.currentConnection'),
					icon: 'none'
				})
			},
			handleWifiSelect(wifiName, wifiPwd) {
				this.selectedWifi = wifiName
				this.selectedWifiPwd = wifiPwd
				this.showConnectModal = true
			},
			cancelConnect() {
				this.showConnectModal = false
				this.selectedWifi = ''
			},
			confirmConnect() {
				this.showConnectModal = false
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: this.$t('device.connectSuccess'),
						icon: 'success'
					})
					this.currentWifi = this.selectedWifi
					this.selectedWifi = ''
				}, 2000)
				uni.navigateTo({
					url: `/pages/device/addnetwork?deviceId=${this.deviceId}&deviceType=${this.deviceType}&currentWifi=${this.currentWifi}&wifiName=${this.selectedWifi}&wifiPwd=${this.selectedWifiPwd}&networkType=WIFI`
				})
			},
			connectOtherNetwork() {
				this.showOtherNetworkModal = true
			},
			handleModalClose() {
				this.showConnectModal = false
				this.selectedWifi = ''
			},
			handleOtherNetworkModalClose() {
				this.showOtherNetworkModal = false
				this.otherWifiName = ''
				this.otherWifiPwd = ''
			},
			confirmOtherNetworkConnect() {
				if (!this.otherWifiName.trim()) {
					uni.showToast({
						title: this.$t('device.pleaseEnterWifiName'),
						icon: 'none'
					})
					return
				}
				if (!this.otherWifiPwd.trim()) {
					uni.showToast({
						title: this.$t('device.pleaseEnterPassword'),
						icon: 'none'
					})
					return
				}
				this.showOtherNetworkModal = false
				uni.navigateTo({
					url: `/pages/device/addnetwork?deviceId=${this.deviceId}&deviceType=${this.deviceType}&currentWifi=${this.currentWifi}&wifiName=${this.otherWifiName}&wifiPwd=${this.otherWifiPwd}&networkType=WIFI`
				})
			},
			handle4GSelect() {
				this.show4GModal = true
			},
			handle4GModalClose() {
				this.show4GModal = false
			},
			confirm4GConnect() {
				this.show4GModal = false
				uni.navigateTo({
					url: `/pages/device/addnetwork?deviceId=${this.deviceId}&deviceType=${this.deviceType}&currentWifi=${this.currentWifi}&networkType=4G`
				})
			}
		},
		components: {
			Navigator2,
			neilModal
		}
	}
</script>

<style lang="scss" scoped>
.container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #F0F2F5;
}

.section {
	margin-top: 10px;
	padding: 0 16px;
}

.section-title {
	line-height: 24px;
	padding: 16rpx 8rpx;
	font-size: 32rpx;
	font-weight: 600;
	color: #1F2937;
}

.section-subtitle {
	padding: 0 8rpx 16rpx;
	font-size: 26rpx;
	color: #6B7280;
	line-height: 20px;
}

.wifi-item {
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	padding: 18px 26px;
	margin-bottom: 16rpx;
	border-radius: 16rpx;
}

.wifi-item:active {
	background-color: #F5F5F5;
}

.wifi-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 24rpx;
}

.wifi-name {
	flex: 1;
	font-size: 28rpx;
	color: #1F2937;
	font-weight: 600;
	line-height: 22px;
}

.wifi-status {
	display: flex;
	align-items: center;
}

.status-dot {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: #52C41A;
	position: relative;
}

.status-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8rpx;
	height: 14rpx;
	border: 2rpx solid #FFFFFF;
	border-top: none;
	border-left: none;
	transform: translate(-50%, -60%) rotate(45deg);
}

.arrow-icon {
	width: 16px;
	height: 16px;
}

.wifi-list .wifi-item:last-child {
	margin-bottom: 0;
}

/* 自定义弹框样式 */
.custom-modal-content {
	padding: 60rpx 48rpx 48rpx;
	text-align: center;
}

.custom-modal-title {
	font-size: 32rpx;
	color: #141619;
	font-weight: 600;
	margin-bottom: 20rpx;
	line-height: 24px;
}

.custom-modal-buttons {
	display: flex;
	gap: 32rpx;
}

.custom-modal-button {
	flex: 1;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	font-weight: 400;
}

.cancel-btn {
	background-color: #F5F5F5;
	color: #666666;
}

.confirm-btn {
	background-color: #007AFF;
	color: white;
}

.custom-modal-button:active {
	opacity: 0.8;
}

/* 无线局域网模块样式 */
.wireless-section {
	background-color: #FFFFFF;
	margin-top: 2rpx;
	padding: 32rpx;
}

.wireless-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 40rpx;
}

.wireless-info {
	flex: 1;
}

.wireless-title {
	display: block;
	font-size: 28rpx;
	font-weight: 600;
	line-height: 22px;
	color: #1F2937;
	margin-bottom: 8rpx;
}

.wireless-subtitle {
	display: block;
	font-size: 24rpx;
	color: #707A89;
	font-weight: 400;
	line-height: 20px;
}

.wireless-switch {
	margin-left: 24rpx;
}

.wifi-options {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
	background-color: #F5F7FA;
	border-radius: 8px;
	padding: 20px;
}

.wifi-option-row {
	display: flex;
	gap: 16rpx;
}

.wifi-option {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	min-height: 140rpx;
}

.wifi-option-icon {
	width: 258rpx;
	height: 80rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.wifi-option-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wifi-option-desc {
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	color: #1F2937;
	display: block;
}

.wifi-option-status {
	width: 17.54px;
	height: 17.62px;
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
}

/* wifi-option 中的 wifi-option-status 位置调整 */
.wifi-option-row:first-child .wifi-option:first-child .wifi-option-status {
	right: 12px;
}

.wifi-option-row:first-child .wifi-option:last-child .wifi-option-status {
	right: 18px;
}

/* 确定按钮文字加粗 */
::v-deep .neil-modal__footer-right {
	font-size: 16px !important;
	color: #0256FF !important;
	font-weight: 600 !important;
}

/* Wi-Fi输入框样式 */
.wifi-input-container {
	margin-top: 40rpx;
}

.wifi-input {
	width: 100%;
	height: 88rpx;
	line-height: 24px;
	background-color: #F3F3F3;
	border-radius: 8rpx;
	padding: 0 24rpx;
	font-size: 16px;
	font-weight: 400;
	color: #000000;
	margin-bottom: 24rpx;
	box-sizing: border-box;
	text-align: left;
}

.wifi-input:focus {
	outline: none;
}

.password-input {
	margin-bottom: 0;
}

</style>
